<template>
    <div class="addOrganization public">
				<el-breadcrumb separator=">" class="crumbs">
					<el-breadcrumb-item :to="{ path:'/organization'}">机构列表</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path:'/addOrganization'}">添加机构</el-breadcrumb-item>
				</el-breadcrumb>
				<el-row  :gutter="20">
      <el-col :span="4">&emsp;</el-col>
      <el-col :span="16">
        <el-col :span="8" class="addOrg addOrgText">上级组织</el-col><el-col class="addOrg" :span="16">
            <el-select v-model="supOrganization" disabled  placeholder="无" class="selectBox">
                <el-option v-for="item in supOrganizations":key="item.id":label="item.name":value="item.id">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="8" class="addOrg addOrgText">组织名称</el-col><el-col class="addOrg" :span="16"><el-input placeholder="请输入内容" v-model="name" @blur="isrepetition"  @keyup.native="delSpace('name')"></el-input></el-col>
        <el-col :span="8" class="addOrg addOrgText">所属区域</el-col>
        <el-col :span="16"  class="addOrg">
            <el-select v-model="areaCode" placeholder="请选择" class="selectBox">
            <el-option
            v-for="item in areas"
            :key="item.code"
            :label="item.name"
            :value="item.code">
            </el-option>
        </el-select>
        </el-col>

      </el-col>
      <el-col :span="4">&emsp;</el-col>
		</el-row>
		<!-- 保存 -->
		<el-row class="addUserBtn">
				<el-col :sm="9" :xs="6">&emsp;</el-col>
				<el-col :sm="3" :xs="6"><el-button type="primary" @click="save">保存</el-button></el-col>
				<el-col :sm="3" :xs="6"><el-button @click='cancelSave'>取消</el-button></el-col>
				<el-col :sm="9" :xs="6">&emsp;</el-col>
			</el-row>
		</div>
</template>

<script>
export default {
    name : 'addOrganization',
    data (){
        return {
            areas:[],
            areaCode:'',
            supOrganizations:[],
            supOrganization:'',
            name:'',
            exist:false
        }
    },
    methods:{
        delSpace (str) {
        this[str]  = this[str].replace(/\s/g,"");
        },
        save () {
            if(!this.name){
                this.$message({
                    message:'请填写组织名称',
                    type:'error',
                    duration:1500,
                    showClose:true
                })
                return
            }
            if(this.name.length > 40 || this.name.length < 1){
                this.$message({
                    type:'warning',
                    message:'组织名称应为1-40个字符',
                    duration:1500,
                    showClose:true
                })
                return
            }
            if(this.exist){
                this.$message({
                    type:'warning',
                    message:'该机构名称已存在',
                    duration:1500,
                    showClose:true
                })
                return
            }
            var params = {
                pid:this.supOrganization?this.supOrganization:'',
                name:this.name,
                areaCode:this.areaCode
            }
            $.post(this._path + '/organizations',params,(res)=>{
                if(res.code == 'SUCCESS'){
                    this.$message({
                        message:'添加成功',
                        type:'success',
                        duration:1500,
                        showClose:true
                    })
                    this.$router.push('/organization')
                }else{
                    this.requestError(res,this)
                }
            })
        },
        cancelSave () {
            window.history.go(-1);
        },
        isrepetition () {
            if(!this.name){
                return
            }
            if(this.name.length > 40 || this.name.length < 1){
                this.$message({
                    type:'warning',
                    message:'组织名称应为1-40个字符',
                    duration:1500,
                    showClose:true
                })
                return
            }
            let params = {
                pid:this.$route.query.id == '无' ? 1 : this.$route.query.id,
                name: this.name
            }
            $.get(this._path + '/organizations/exist',params, (res)=>{
                if(res.code == 'SUCCESS'){
                    if (res.data.exist) {
                        this.$message({
                            type:'warning',
                            message:'该机构名已存在！',
                            duration:1500,
                            showClose:true
                        })
                        this.exist = true;
                    }else{
                        this.exist = false;
                    }
                }else{
                    this.requestError(res,this)
                }

            })
        }
    },
    beforeCreate () {
        // 进入页面请求所属机构的信息（如果没有···）
        if(this.$route.query.id != '无'){
            $.get(this._path + '/organizations/' + this.$route.query.id,{},(res)=>{
                if(res.code == 'SUCCESS'){
                    this.supOrganization = res.data.organization.id;
                    this.areaCode = res.data.organization.area.code * 1;
                }else{
                    this.requestError(res,this)
                }
            })
        }
        // 请求所属区域的代码
        this.$http.get(this._path + '/areas').then((res)=>{
            if(res.data.code == 'SUCCESS'){
                this.areas = res.data.data.areas;

            }else{
                this.requestError(res,this)
            }
        })
        this.$http.get(this._path + '/organizations').then((res)=>{
            if(res.data.code == 'SUCCESS'){
                this.supOrganizations = res.data.data.organizations;
            }else{
                this.requestError(res,this)
            }

        })
    }
}
</script>

<style scoped lang="scss">
	@import "./../style/public.scss";
    @import "./../style/addOrganization.scss";
</style>
